<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.5.4.2/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.4.2/themes/black/easyui.css"/>
<link rel="stylesheet" type="text/css" href="css/taojin/layout.css">
</head>
<body>
<script type="text/javascript">

		//添加按钮
	function roleButtons(value,row,index) {
		var editRole="",addFunctions="",deleteRole="",roleInfo="";
		editRole = "<a class='cell_button' onclick='editRole("+row.rId+")' style='margin-left:10px;'>编辑</a>"
		addFunctions = "<a class='cell_button' onclick='addFunctions("+row.rId+")' style='margin-left:10px;'>分配权限</a>"
		roleInfo = "<a class='cell_button' onclick='roleInfo("+row.rId+")' style='margin-left:10px;'>角色详情</a>"
		deleteRole = "<a class='cell_button' onclick='deleteRole("+row.rId+")' style='margin-left:10px;'>删除角色</a>"
		return editRole+addFunctions+roleInfo+deleteRole;
	}
	//编辑角色
	
	function editRole(rId){
		$("#role-add-dialog").dialog({title:'编辑角色',href2:'editRole'});
		$("#role-form").form('load','getRoleById?rId='+rId);
		$("#role-add-dialog").dialog('open');
	}
	//分配权限
	function addFunctions(rId){
		$("#addFunctions-dg").datagrid({
			url:'getFunctions',
			method:'get',
			singleSelect:false,
			columns:[[
				{field:'fId',title:'权限编号',width:1,align:'center',checkbox:'true'},
				{field:'fName',title:'权限名称',width:1,align:'center'},
				{field:'fDescibe',title:'权限描述',width:2,align:'center'}
			]],
			onLoadSuccess:function(){
				$('#addFunctions-dg').datagrid('fixRowHeight');
				$.getJSON("getRoleFunctions",{rId:rId},function(data){
					if (data != null) {
						var rows = $("#addFunctions-dg").datagrid('getRows');
						for (var i = 0; i < data.length; i++) {
							for (var j = 0; j< rows.length; j++) {
								 if (data[i].fId == rows[j].fId) {
									$("#addFunctions-dg").datagrid('checkRow',j);
								} 
							}
						}
						
					}
				})
			},rowStyler:function(index,row){
				return 'height:32px';
			}
		});
		$("#role-addFunctions-dialog").dialog({
			rId:rId
		});
		$("#role-addFunctions-dialog").dialog('open');
	}
	//角色详情
	function roleInfo(rId){
		$("#role-roleInfo-dialog").dialog({rId:rId});
		$("#roleInfo-emps-dg").datagrid({
			url:'getRoleEmps',
			queryParams:{
				rId:rId
			},
			method:'get',
			columns:[[
				{field:'empId',title:'员工编号',width:1,align:'center'},
				{field:'empName',title:'员工姓名',width:2,align:'center'},
				{field:'deptName',title:'部门名称',width:2,align:'center'},
			]]
		});
		
		$("#roleInfo-functions-dg").datagrid({
			url:'getRoleFunctions',
			queryParams:{
				rId:rId
			},
			method:'get',
			columns:[[
				{field:'fName',title:'功能名称',width:1,align:'center'},
				{field:'fDescribe',title:'功能描述',width:3,align:'center'},
			]]
		});
		
		$("roleInfo-rmps-dg").datagrid('reload');
		$("#role-roleInfo-dialog").dialog('open');
	}
	
	
	//删除角色
	function deleteRole(rId){
		$.messager.confirm('提示','确定要删除该角色吗?',function(data){
			if (data) {
				$.getJSON("deleteRole",{rId:rId},function(data){
					if (data==true) {
						$("#role-dg").datagrid('reload');
					}else {
						$.messager.alert('提示', "删除失败...");
					}
				});
			}
		})
	}
	
	$(function() {
		//添加角色
		$("#role-add").linkbutton({
			onClick:function(){
				$("#role-add-dialog").dialog({title:'添加角色',href2:'addRole'});
				$("#role-form").form('clear');
				$("#role-add-dialog").dialog('open');
			}
		});
		//获得所有角色
		$("#role-dg").datagrid({
			url:'getRoles',
			method:'post',
			columns:[[
				{field:'rId',title:'角色编号',width:1,align:'center'},
				{field:'rName',title:'角色名称',width:1,align:'center'},
				{field:'rDescribe',title:'角色简述',width:3,align:'center'},
				{field:'Operate',title:'操作',width:4,formatter:roleButtons}]],
				onLoadSuccess:function(){
					$(".cell_button").linkbutton({});
					$('#dept-dg').datagrid('fixRowHeight');
				},rowStyler:function(index,row){
					return 'height:32px';
				}
		});
		//刷新角色
		$("#role-refresh").linkbutton({
			onClick:function(){
				$("#role-dg").datagrid('reload');
			}
		});
		
		
	})
</script>

<div class="easyui-layout" id="role-layout" data-options="fit:true,border:false">
		<div data-options="region:'center',border:false" style="overflow:hidden;">
			<table id="role-dg" class="easyui-datagrid"
				data-options="fit:true,fitColumns:true,toolbar:'#role-dg-toolbar',pagination:true,rownumbers:true,rownumberWidth:30,
				border:false,singleSelect:true,scrollbarSize :0">
			</table>
			
			<div id="role-dg-toolbar" >
				<a id="role-add" class="easyui-linkbutton" href="#" data-options=""	>添加角色</a>
				<a id="role-refresh" class="easyui-linkbutton" href="#" data-options="">刷新</a>
			</div>
		</div>
		<div data-options="region:'south',border:false" style="height: 50px;"></div>
	</div>
	<div id="role-add-dialog" class="easyui-dialog" title="添加角色"
		style="height: 500px; width: 400px;"
		data-options="
			resizable:true,modal:true,closed:true,buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:function(){
					$('#role-form').form({
						url:$('#role-add-dialog').dialog('options').href2,
						onSubmit:function(param){
							return $(this).form('validate');
						},
						success:function(data){
							if(data == 'true'){
								$('#role-dg').datagrid('reload');
								$('#role-add-dialog').dialog('close');
							}else{
								$.messager.alert('警告','添加失败!');
							}
						}
					}).submit();
				}
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:function(){
					$('#role-add-dialog').dialog('close');
				}
			}]
		">
		<form id="role-form" method="post">
			<div>
				<input  name="rId" type="hidden">
			</div>
			<div style="margin-left: 10px; margin-top: 20px; font-size: 16px;">
				<input id="rName" name="rName" class="easyui-textbox" style="height: 30px; width: 300px;"
					data-options="label:'角色名称:',labelWidth:70,required:true">
			</div>
			<div style="margin-left: 10px; margin-top: 20px;">
				<input id="rDescribe" name="rDescribe" class="easyui-textbox" style="height: 100px; width: 300px;"
					data-options="label:'角色描述:',labelWidth:70,multiline:true">
			</div>
		</form>
	</div>
	
	<div id="role-addFunctions-dialog" class="easyui-dialog" style="width: 400px;height: 600px;"
		data-options="resizable:true,modal:true,closed:true,
			buttons:[{
					text:'保存',
					iconCls:'icon-ok',
					handler:function(){
					var functions = $('#addFunctions-dg').datagrid('getChecked');
					//获取所有选中的功能id
					var functionIds= [];
					for(var i = 0; i < functions.length; i ++){
							functionIds.push(functions[i].fId);
					}
					var id = $('#role-addFunctions-dialog').dialog('options').rId;
					$.post('addRoleFunctions',{fId:functionIds,rId:id},function(data){
						if(data == 'true'){
								$.messager.alert('提示','保存成功!');
								$('#role-addFunctions-dialog').dialog('close');
							}else{
								$.messager.alert('警告','添加失败!');
							}
						
					});
					}
				},{
					text:'关闭',
					iconCls:'icon-cancel',
					handler:function(){
						$('#role-addFunctions-dialog').dialog('close');
					}
	}]">

		<table id="addFunctions-dg" class="easyui-datagrid"
			data-options="fit:true,fitColumns:true,rownumbers:true,border:false,rownumberWidth:30,singleSelect:true,scrollbarSize :0">
		</table>
	</div>
	
	<div id="role-roleInfo-dialog" class="easyui-dialog" style="width: 500px;height: 400px;"
		data-options="resizable:true,modal:true,closed:true,
			buttons:[{
					text:'关闭',
					iconCls:'icon-cancel',
					handler:function(){
						$('#role-roleInfo-dialog').dialog('close');
					}
	}]">
		<div id="roleInfo-accordion" class="easyui-accordion" data-options="border:false,fit:true">
			<div title="拥有用户" >   
       			<table id="roleInfo-emps-dg" class="easyui-datagrid" 
       				data-options="fit:true,fitColumns:true,rownumbers:true,border:false,rownumberWidth:30,singleSelect:true,scrollbarSize :0">
				</table>
			</div>
			<div title="功能列表">   
       			<table id="roleInfo-functions-dg" class="easyui-datagrid" 
       				data-options="fit:true,fitColumns:true,rownumbers:true,border:false,rownumberWidth:30,singleSelect:true,scrollbarSize :0">
				</table>  
			</div>
		</div>
	</div>
</body>
</html>